<template>
	<view class="all">
		<view class="bg"></view>
		<view class="mess">
			<!-- 标题 -->
			<!-- <view class="form-title">个人信息</view> -->
			
			<!-- 手机号输入框 -->
			<view class="input-item">
				<image src="/static/08my/phone.png" mode="widthFix" class="input-icon"></image>
				<input 
					type="number" 
					v-model="phone"
					placeholder="请输入手机号" 
					maxlength="11"
					class="input-content"
				>
			</view>
			<!-- 验证码输入框 -->
			<view class="input-item">
				<image src="/static/08my/yzm.png" mode="widthFix" class="input-icon"></image>
				<input 
					type="number" 
					v-model="code"
					placeholder="请输入验证码" 
					maxlength="6"
					class="input-content"
				>
				<button 
					class="get-code-btn" 
					@click="handleGetCode"
					:disabled="isCounting"
				>
					{{ isCounting ? `${count}s后重新获取` : '获取验证码' }}
				</button>
			</view>
			
			<!-- 提交按钮 -->
			<button 
				class="submit-btn" 
				@click="handleSubmit"
				:disabled="!isFormValid"
			>
				保存修改
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onUnmounted } from 'vue'

// 表单数据
const phone = ref('')
const code = ref('')

// 验证码倒计时
const isCounting = ref(false)
const count = ref(60)
let timer = null

// 验证表单是否有效
const isFormValid = computed(() => {
  return phone.value.length === 11 && code.value.length === 6
})

// 获取验证码
const handleGetCode = () => {
  // 验证手机号格式
  if (phone.value.length !== 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  
  // 开始倒计时
  isCounting.value = true
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  })
  
  timer = setInterval(() => {
    count.value--
    if (count.value <= 0) {
      clearInterval(timer)
      isCounting.value = false
      count.value = 60
    }
  }, 1000)
}

// 提交表单
const handleSubmit = () => {
  if (!isFormValid.value) return
  
  uni.showToast({
    title: '信息保存成功',
    icon: 'success'
  })
  
  // 跳转
  setTimeout(() => {
    uni.navigateTo({
    	url: '/pages/my/myDetail/myDetail',
    	success: res => {},
    	fail: () => {},
    	complete: () => {}
    });
  }, 1500)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
	.all {
		padding-top: 10rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.bg {
		background-color: #0472fe;
		width: 100%;
		height: 300rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		right: 0;
	}

	.mess {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx 10rpx;
		padding: 30rpx;
		min-height: 500rpx;
	}
	

	
	/* 输入框容器 */
	.input-item {
		display: flex;
		align-items: center;
		height: 90rpx;
		border: 1px solid #eee;
		border-radius: 50rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
	}
	
	/* 输入框图标 */
	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 0 20rpx;
	}
	
	/* 输入框内容 */
	.input-content {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
	}
	
	/* 获取验证码按钮 */
	.get-code-btn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #fff;
		background-color: #0472fe;
		padding: 0;
		border-radius: 100rpx;
	}
	
	.get-code-btn:disabled {
		color: #999;
	}
	
	/* 提交按钮 */
	.submit-btn {
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0472fe;
		color: #fff;
		font-size: 32rpx;
		border-radius: 50rpx;
		margin-top: 50rpx;
		padding: 0;
	}
	
	.submit-btn:disabled {
		background-color: #ccc;
		opacity: 0.7;
	}
</style>